<template>
  <lc-chart-radar
    ref="radarRef"
    :options="radarOptions"
    :map-options="radarMapOptions"
    :data="radarData"
    style="--height: 300px"
  >
  </lc-chart-radar>
</template>

<script setup>
import { ref } from "vue";

import { request } from "@/apis/request";
defineOptions({
  name: "Radar",
});

const radarRef = ref(null);
const radarData = ref([]);
const radarMapOptions = ref({});
const radarOptions = ref({
  title: { text: "", top: 10, left: 10 },
  legend: { right: 10, top: 10 },
  tooltip: { trigger: "item", formatter: "" },
  grid: {
    left: "6%",
    top: "20%",
    right: "5%",
    bottom: "10%",
    containLabel: true,
  },
  color: [
    "rgba(62, 115, 241, 1)",
    "rgba(72, 192, 179, 1)",
    "rgba(123, 185, 44, 1)",
    "rgba(254, 216, 49, 1)",
    "rgba(243, 113, 50, 1)",
    "rgba(240, 54, 62, 1)",
    "rgba(250, 97, 102, 1)",
    "rgba(151, 96, 226, 1)",
  ],
  radar: {
    center: ["50%", "55%"],
    radius: "70%",
    startAngle: 90,
    splitNumber: 4,
    shape: "circle",
    splitArea: { areaStyle: { color: ["transparent"] } },
    axisLabel: {
      show: false,
      fontSize: 20,
      color: "#000",
      fontStyle: "normal",
      fontWeight: "normal",
    },
    axisLine: { show: true, lineStyle: { type: "dashed", color: "#000" } },
    splitLine: { show: true, lineStyle: { type: "dashed", color: "#000" } },
  },
  series: {
    type: "radar",
    symbol: "circle",
    symbolSize: 10,
    areaStyle: { opacity: "0.4" },
  },
});

const getRadarData = async () => {
  try {
    let params = { url: "", method: "get", params: {} };
    const res = await request(params);
    if (res) {
      radarData.value = res.data || [];
    }
  } catch (e) {
    console.error("获取数据出错: " + e);
  }
};
getRadarData();
</script>
